<template>
  <!-- 热力图 -->
  <div>
    <div style="font-size:18px;"><strong>A型元器件成本市场走势，数量单位(k)</strong></div>
    <div :style="{ height:`${height}px` }" :id="id"></div>
  </div>
</template>

<script>
import G2 from '@antv/G2'
export default {
  props: {
    charData: {
      type: Array,
      default: function () {
        return []
      }
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    id: String
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.drawChart(this.charData)
  },
  watch: {
    charData (val, oldVal) {
      this.drawChart(val)
    }
  },
  methods: {
    drawChart (datas) {
      this.chart && this.chart.destroy()
      this.chart = new G2.Chart({
        container: this.id,
        forceFit: true,
        height: this.height,
        padding: 'auto'
      })
      this.chart.source(datas, {
        value: {
          max: 2000,
          min: -1000
        }
      })
      this.chart.scale('month', {
        type: 'cat'
      })
      this.chart.axis('month', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          },
          formatter: function formatter (text) {
            return text + '月'
          }
        }
      })
      this.chart.axis('value', {
        label: {
          textStyle: {
            fill: '#aaaaaa'
          }
        }
      })
      this.chart.area().position('month*value').color('white').opacity(0.3)
      this.chart.line().position('month*value').color('white').size(2)
      // 分段颜色
      this.chart.guide().regionFilter({
        top: true,
        start: ['min', 'max'],
        end: ['max', 0],
        color: '#f5222d'
      })
      this.chart.guide().regionFilter({
        top: true,
        start: ['min', 0],
        end: ['max', 'min'],
        color: '#2fc25b'
      })
      // 数据标注
      this.chart.guide().dataMarker({
        position: ['2', 1216],
        content: '2月份销售需求旺盛，\n需求大增',
        lineLength: 20,
        autoAdjust: false,
        style: {
          text: {
            textAlign: 'left',
            stroke: '#fff',
            lineWidth: 2
          },
          point: {
            stroke: '#f5222d'
          }
        }
      })
      this.chart.guide().dataMarker({
        position: ['10', 1513],
        content: '产品销售双增，利润达到\n全年新高',
        lineLength: 20,
        autoAdjust: false,
        style: {
          text: {
            textAlign: 'right',
            stroke: '#fff',
            lineWidth: 2
          },
          point: {
            stroke: '#f5222d'
          }
        },
        direction: 'downward'
      })
      this.chart.guide().dataMarker({
        position: ['9', -358],
        content: '无新进货源，成本摊销\n下来有亏损',
        lineLength: 20,
        autoAdjust: false,
        style: {
          text: {
            textAlign: 'right',
            stroke: '#fff',
            lineWidth: 2
          },
          point: {
            stroke: '#2fc25b'
          }
        },
        direction: 'downward'
      })
      // 辅助区间
      this.chart.guide().region({
        start: ['7', 'min'],
        end: ['9', 'max']
      })
      this.chart.render()
    }
  }
}
</script>
